<!doctype html>
<html>
<head>
    <title>留言</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--bootstrap-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <!--coustom css-->
    <!--<link href="css/style.css" rel="stylesheet" type="text/css"/>-->
    <!--script-->
    <script src="js/jquery-1.11.0.min.js"></script>
    <!-- js -->
    <script src="js/bootstrap.js"></script>
    <link href="css/video-js.css" rel="stylesheet">
    <!-- If you'd like to support IE8 -->
    <script src="js/videojs-ie8.min.js"></script>
    <script src="js/video.min.js"></script>
    <!-- /js -->
    <!--fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic'
          rel='stylesheet' type='text/css'>
    <!--/fonts-->
    <!--hover-girds-->
    <link rel="stylesheet" type="text/css" href="css/default.css"/>
    <link rel="stylesheet" type="text/css" href="css/component.css"/>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/about.css">
    <script src="js/modernizr.custom.js"></script>
    <!--/hover-grids-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <!--script-->
</head>
<body style="background-color: white">
<div id="nav" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-sm" href="#">宝可思国际儿童会</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">首页</a></li>
                <li><a href="about.html">关于宝可思ICC</a></li>
                <li><a href="teachingShow.html">教学展示</a></li>
                <li><a href="brand.html">品牌加盟</a></li>
                <li><a href="nationwide.html">全国中心</a></li>
                <li><a href="ICCCommunity.html">宝可思ICC社区</a></li>
                <li class="phone">
                    <img src="./images/phone1.png" alt="">
                    <span>400 1100 508</span>
                </li>
                <li class="english">
                    <span>English</span>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>
<!--留言-->
<div class="container" id="liuyan">
    <div class="row">
        <div class="">
            <form class="form-inline text-center input-height">
                <div class="form-group">
                    <label for="inputName" >您的姓名：</label>
                    <input type="text" class="form-control" style="width: 60%;display: inline-block;margin-left: 8%" id="inputName" name="username" placeholder="请输入您的姓名"><span style="color: red">*</span>
                </div>
                <div class="form-group">
                    <label for="inputPhone">电话号码：</label>
                    <input type="tel" class="form-control" style="width: 60%;display: inline-block;margin-left: 8%" id="inputPhone" name="phone" placeholder="请输入您的电话号码"><span style="color: red">*</span>
                </div>
                <div class="form-group">
                    <label for="inputEm">电子邮件：</label>
                    <input type="tel" class="form-control" style="width: 60%;display: inline-block;margin-left: 8%" id="inputEm" name="Em" placeholder="请输入您的电子邮件">
                </div>
                <div class="form-group">
                    <label for="inputQQNum">QQ号码：</label>
                    <input type="tel" class="form-control" style="width: 60%;display: inline-block;margin-left: 8%" id="inputQQNum" name="QQNum" placeholder="请输入您的QQ号码">
                </div>
                <div class="form-group">
                    <label for="inputLeaMessage" style="position: relative;top: -130px">留言内容：</label>
                    <!--<input type="tel" class="form-control" style="width: 70%;display: inline-block;margin-left: 8%" id="" name="phone" placeholder="请输入您的QQ号码">-->
                    <textarea maxlength="200" style="width: 60%;height: 150px" id="inputLeaMessage" name="LeaMessage"></textarea><span style="color: red">*</span>
                </div>
                <div class="form-group" style="margin-top: 125px;color:black">
                    <button type="submit" id="sub1" name="submit" disabled="disabled" class="btn " >提交</button>
                </div>
            </form>
            <script src="js/bootstrapValidator.min.js"></script>
            <link rel="stylesheet" href="css/bootstrapValidator.min.css">
            <script type="text/javascript">
                $(function () {
                    $('form').bootstrapValidator({
                        message: 'This value is not valid',
                        feedbackIcons: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            username: {
                                message: '提交失败',
                                validators: {
                                    notEmpty: {
                                        message: '姓名不能为空'
                                    },
                                }
                            },
                            Em: {
                                validators: {
                                    emailAddress: {
                                        message: '邮箱格式错误'
                                    }
                                }
                            },
                            phone: {
                                message: '申请试听课失败',
                                validators: {
                                    notEmpty: {
                                        message: '联系电话不能为空'
                                    },
                                    regexp: {
                                        regexp: /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/,
                                        message: '联系电话格式不正确'
                                    }
                                }
                            },
                            LeaMessage:{
                                validators: {
                                    notEmpty: {
                                        message: '留言不能为空'
                                    },
                                }
                            }
                        },
                        submitButtons: 'button[type="submit"]',

                    });
                    $("#sub1").on("click", function(){
                        //获取表单对象
                        var bootstrapValidator = $('form').data('bootstrapValidator');
                        //手动触发验证
                        bootstrapValidator.validate();
                        if(bootstrapValidator.isValid()){
                            //表单提交的方法、比如ajax2提交
                            console.log("内置的 提交！！！ ")
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>
